<template>
	<view class="auth">
		<image src="/static/logo1.png" mode="widthFix" class="logo"></image>
		<view class="board">
			<view class="flex" v-if="isCheck === 1">
				<view class="flexItem" :class="{active: state.active === 0}" @click="setActive(0)">没账号</view>
				<view class="flexItem" :class="{active: state.active === 1}" @click="setActive(1)">有账号</view>
			</view>
			<template v-if="state.active === 0">
				<u-picker :show="state.show" :columns="[checkerList]" keyName='nickname' @cancel="cancelPicker" @confirm="pickerConfirm"></u-picker>
				<u--form labelPosition="left" label-width="4em" :model="state.formModel" ref="form">
					<u-form-item label="审核员" prop="checkerName" customStyle="position: relative;">
						<u--input v-model="state.formModel.checkerName" readonly placeholder="请选择审核员" placeholderStyle='color:#555;'></u--input>
						<view class="pickerHand" @click="state.show = true"></view>
					</u-form-item>
					<u-form-item label="姓名" prop="realName">
						<u--input v-model="state.formModel.realName" placeholder="请输入姓名" placeholderStyle='color:#555;'></u--input>
					</u-form-item>
					<u-form-item label="手机号" prop="mobile">
						<u--input maxlength="11" type="number" v-model="state.formModel.mobile" placeholder="请输入手机号" placeholderStyle='color:#555;'></u--input>
					</u-form-item>
					<u-form-item label="公司" prop="companyName">
						<u--input v-model="state.formModel.companyName" placeholder="请输入公司名称" placeholderStyle='color:#555;'></u--input>
					</u-form-item>
				</u--form>
				<view class="mt30"></view>
				<u-button color="#006767" @click='onsubmit'>提交</u-button>
				<view class="mt30"></view>
				<u-button color="#006767" @click='refreshUserInfo' >已授权</u-button>
			</template>
			<template v-if="state.active === 1">
				<u--form labelPosition="left" label-width="4em" :model="state.accountModel" ref="form">
					<u-form-item label="手机号" prop="mobile">
						<u--input maxlength="11" type="number" v-model="state.accountModel.mobile" placeholder="请输入手机号" placeholderStyle='color:#555;'></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u--input v-model="state.accountModel.password" type="password" password placeholder="请输入密码" placeholderStyle='color:#555;'></u--input>
					</u-form-item>
				</u--form>
				<u-button color="#006767" class="mt30" @click='onAccountSubmit'>提交</u-button>
			</template>
			<view class="text">
				* 本产品仅对合作伙伴和内部员工开放使用
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import { useUserinfo } from '@/store/userinfo.js'
	import { storeToRefs } from 'pinia'
	import request from '@/utils/request.js'
	const Userinfo = useUserinfo()
	const { publicInfo } = storeToRefs(Userinfo)
	const checkerList = computed(() => publicInfo.value.checkerList || [])
	const isCheck = computed(() => publicInfo.value.isCheck)
	const state = reactive({
		accountModel: {
			mobile: '',
			password: ''
		},
		formModel: {
			realName: '',
			mobile: '',
			companyName: '',
			checkerName: '',//不会被提交
			checkUid: ''
		},
		active: 0,
		show: false,
	})
	
	const refreshUserInfo = () => {
		getApp().getUserinfo('auth')
	}
	
	const onAccountSubmit = () => {
		const { mobile, password } = state.accountModel
		if(!mobile) {
			return uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
		}
		if(!uni.$u.test.mobile(String(mobile))) {
			return uni.showToast({
				title: '手机号格式错误',
				icon: 'none'
			})
		}
		if(!password) {
			return uni.showToast({
				title: '请输入密码',
				icon: 'none'
			})
		}
		if(password.length < 6) {
			return uni.showToast({
				title: '密码错误',
				icon: 'none'
			})
		}
		if(mobile != '15038390911') {
			return uni.showToast({
				title: '账号不存在',
				icon: 'none'
			})
		}
		if(password !== 'a123456') {
			return uni.showToast({
				title: '密码错误',
				icon: 'none'
			})
		}
		Userinfo.setAdminChecker(true)
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/index/index'
			})
		},0)
	}
	const setActive = active => {
		state.active = active
	}
	const cancelPicker = () => {
		state.show = false
	}
	const pickerConfirm = params => {
		console.log(params,'params')
		state.show = false;
		state.formModel.checkerName = params.value[0].nickname
		state.formModel.checkUid = params.value[0].id
	}
	const onsubmit = () => {
		const { checkerName, realName, mobile, companyName, checkUid } = state.formModel
		if(!checkerName) {
			return uni.showToast({
				title: '请选择审核员',
				icon: 'none'
			})
		}
		if(!realName || realName.length < 2) {
			return uni.showToast({
				title: '请输入真实姓名',
				icon: 'none'
			})
		}
		if(!mobile) {
			return uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
		}
		if(!uni.$u.test.mobile(String(mobile))) {
			return uni.showToast({
				title: '手机号格式错误',
				icon: 'none'
			})
		}
		if(!companyName) {
			return uni.showToast({
				title: '请输入公司名称',
				icon: 'none'
			})
		}
		request({
			url:'api/login/applyAdd',
			method:'post',
			needLogin: true,
			data: {
				realName, mobile, companyName, checkUid
			}
		}).then(res => {
			uni.showToast({
				title:'信息已提交',
			})
		})
	}
</script>

<style lang="scss" scoped>
	.auth {
		padding: 24rpx;
		height: 100vh;
		box-sizing: border-box;
		background-color: $main-color;

		.logo {
			display: block;
			margin: 10rpx auto 50rpx;
			width: 400rpx;
			height: 120rpx;
		}

		.board {
			width: 85%;
			margin: auto;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
			background-color: rgba(#fff,0.5);

			.flex {
				display: flex;
				border-radius: 8rpx;
				text-align: center;
				color: #fff;
				font-weight: 600;
				margin-bottom: 30rpx;
				border: 1px solid #fff;
				padding: 4rpx;
				overflow: hidden;

				.flexItem {
					width: 50%;
					flex-shrink: 0;
					flex: 1;
					padding: 15rpx 20rpx;
					border-radius: 8rpx;
					color: #333;
					transition: all .3s;
					&.active {
						color: #fff;
						background-color: $main-color;
					}
				}
			}
			.pickerHand {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				z-index: 10;
			}
			.text {
				color: #ff0000;
				font-size: 26rpx;
				padding: 20rpx 0;
			}
		}
	}
</style>